<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="assets/css/css/index.css"/>
    <title>index</title>
    <style type="text/css">
        .banner{width: 100%;height: 500px;background: url(assets/img/r.jpg) no-repeat 100% 100%;background-size: 100% 100%;}
        .font{width: 90%;text-align: center;color: #fff;line-height: 60px;font-size: 20px;padding-top: 20px;}
        .font h1{word-spacing: 20px;letter-spacing: 10px;font-size: 50px;}
        .fontP{text-align: center;color: #fff;line-height: 60px;font-size: 20px;padding-top: 20px;}
        .forms{width: 90%;margin: 0 auto;}
        .form{background-color: #D6CCC5;text-align: center;display: flex;justify-content: space-around;align-items: center;height: 60px;width: 30%;padding: 0 20px;margin: 30px auto;}
        .form input{border-radius: 5px;display: block;height: 30px;width: 350px;border: none;padding-left: 10px;font-weight: bold;}
        .form button{width: 100px;height: 30px;border-radius: 5px;border: none;background: url(assets/img/button.png) no-repeat 10px 6px;background-size: 15px 15px;background-color: #F19323;font-weight: bold;}
        /* banner完 */
        .main{width: 100%;height: 400px;background: url(assets/img/banner2.jpg) no-repeat 100% 100%;background-size: 100%;}
        .main p{font-size:40px ;font-weight: bold;color: #fff;line-height: 60px;width: 90%;margin: 0 auto;padding-top: 100px;text-align: center;word-spacing: 15px;letter-spacing: 5px;}
        /* main完 */
        @media screen and (max-width:940px) {
            .form{flex-wrap: wrap;padding: 20px 20px;margin: 0px auto;}
            .fontP{font-size: 15px;padding-top: 0px;}
        }
        @media screen and (max-width:800px){
            .form{width: 40%;padding: 20px 20px;margin: 0px auto;}
            .font{line-height: 50px;padding-top: 10px;}
            .fontP{font-size: 15px;padding-top: 0px;}
        }
        @media screen and (max-width:650px){
            .form{width: 40%;padding: 20px 40px;margin: 5px auto;}
            .font{line-height: 40px;padding-top: 10px;}
            .font h1{word-spacing: 10px;letter-spacing: 10px;font-size: 40px;}
            .fontP{font-size: 15px;padding-top: 0px;}
        }
    </style>
</head>
<body>
    <div id="bigBox">
<!--        头部-->
        <div th:replace="pub_head"></div>
        <div class="banner1">
            <div class="center ways">
                <div class="way" th:each="user:${modules[3].banners}" th:onclick="'detailFun(' + ${user.id} + ')'">
                    <img th:src="${user.imgUrl1}">
                    <h3>[[${user.title}]]</h3>
                    <h3 class="wayF2">[[${user.description}]]</h3>
                    <hr />
                    <div class="wayB">
                        <p class="wayF">[[${user.content}]]</p>
                        <p class="wayF1">[[${user.content1}]]<span>[[${user.remark}]]</span></p></a>
                    </div>
                </div>
                <!--<div class="way">
                    <img src="assets/img/home1.png">
                    <h3>Civita di Bagnoregio,</h3>
                    <h3 class="wayF2">Italia</h3>
                    <hr />
                    <div class="wayB">
                        <p class="wayF">April 14, 2015</p>
                        <p class="wayF1">Uploaded by <span>John Doe</span></p>
                    </div>
                </div>
                <div class="way">
                    <img src="assets/img/home1.png">
                    <h3>Civita di Bagnoregio,</h3>
                    <h3 class="wayF2">Italia</h3>
                    <hr />
                    <div class="wayB">  
                        <p class="wayF">April 14, 2015</p>
                        <p class="wayF1">Uploaded by <span>John Doe</span></p>
                    </div>
                </div>-->
            </div>
        </div><!--banner1-->
        <div class="banner2 center">
            <div class="title">[[${modules[6].module.title}]]<span class="hr"></span></div>
            <div class="con">
                <p>[[${modules[6].module.description}]]</p>
            </div>
            <div class="box">
                <div class="boxs" th:each="user1:${modules[6].banners}" th:onclick="'detailFun('+${user1.id}+')'">
                    <div class="img1"><img th:src="${user1.imgUrl1}" ></div>
                    <h4>[[${user1.title}]]</h4>
                    <p>[[${user1.description}]]</p>
                </div>
                <!--<div class="boxs">
                    <div class="img1"><img src="assets/img/banner2i.png" ></div>
                    <h4>Lorem ipsum dolor</h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
                </div>
                <div class="boxs">
                    <div class="img1"><img src="assets/img/banner2i.png" ></div>
                    <h4>Lorem ipsum dolor</h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
                </div>-->
            </div>
            <div class="more">
                <button>MORE</button>
            </div>
        </div><!--banner2-->
        <div class="main">
            <p>Curabitur pharetra sed magna at tincidunt. Maecenas auctor tincidunt ex. Aliquam a vestibulum Donec diam ipsum euismod.</p>
        </div><!--main-->
        <div class="banner3 center">
            <div class="title">[[${modules[4].module.name}]]<span class="hr"></span></div>
            <div class="con">
                <p>[[${modules[4].module.description}]]</p>
            </div>
            <div class="boxOne" th:if="${i.index}%4==0" th:each="user4,i:${modules[4].banners}" th:onclick="'detailFun('+${user4.id}+')'">
                <div class="box1" th:each="user4:${#numbers.sequence(i.index,i.index+3)}">
                    <div class="img2"><img th:src="${modules[4].banners[user4].imgUrl2}"></div>
                    <h4>[[${modules[4].banners[user4].title}]]</h4>
                    <p>[[${modules[4].banners[user4].description}]]</p>
                </div>
                <!--<div class="box1">
                    <div class="img2"><img src="assets/img/banner3i.png" ></div>
                    <h4>Henderit Mauris</h4>
                    <p>Praesent vestibuluolestie lacus</p>
                </div>
                <div class="box1">
                    <div class="img2"><img src="assets/img/banner3i.png" ></div>
                    <h4>Henderit Mauris</h4>
                    <p>Praesent vestibuluolestie lacus</p>
                </div>
                <div class="box1">
                    <div class="img2"><img src="assets/img/banner3i.png" ></div>
                    <h4>Henderit Mauris</h4>
                    <p>Praesent vestibuluolestie lacus</p>
                </div>-->
            </div>
            <!--<div class="boxOne">
                <div class="box1">
                    <div class="img2"><img src="assets/img/banner3i.png" ></div>
                    <h4>Henderit Mauris</h4>
                    <p>Praesent vestibuluolestie lacus</p>
                </div>
                <div class="box1">
                    <div class="img2"><img src="assets/img/banner3i.png" ></div>
                    <h4>Henderit Mauris</h4>
                    <p>Praesent vestibuluolestie lacus</p>
                </div>
                <div class="box1">
                    <div class="img2"><img src="assets/img/banner3i.png" ></div>
                    <h4>Henderit Mauris</h4>
                    <p>Praesent vestibuluolestie lacus</p>
                </div>
                <div class="box1">
                    <div class="img2"><img src="assets/img/banner3i.png" ></div>
                    <h4>Henderit Mauris</h4>
                    <p>Praesent vestibuluolestie lacus</p>
                </div>
            </div>-->
        </div><!--banner3-->
        <div class="main">
            <p>Curabitur pharetra sed magna at tincidunt. Maecenas auctor tincidunt ex. Aliquam a vestibulum Donec diam ipsum euismod.</p>
        </div><!--main-->
        <div class="banner4 center">
            <div class="leftBox">
                <div class="top">
                    <div class="left">
                        <img src="assets/img/banner4.jpg" >
                    </div>
                    <div class="right">
                        <h4>[[${modules[14].banners[0].title}]]</h4>
                        <p class="rightP">[[${modules[12].module.remark}]]<span>[[${modules[12].module.title}]]</span>[[${modules[12].module.description}]]</p>
                        <p>
                            Nam libero tempore, cum soluta nobis est eligendi optio cumque quod maxime placeat facere possimus nihil impedit quo minus id quod maxime placeat facere possimus.
                        </p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="bottomImg" th:each="n:${modules[14].banners}" th:onclick="'detailFun('+${n.id}+')'">
                        <img th:src="${n.imgUrl1}">
                        <p>[[${n.title}]]</p></a>
                    </div>
                    <!--<div class="bottomImg">
                        <img src="assets/img/banner4i.jpg">
                        <p>Nam libero tempore, cum soluta nobis</p>
                    </div>
                    <div class="bottomImg">
                        <img src="assets/img/banner4i.jpg">
                        <p>Nam libero tempore, cum soluta nobis</p>
                    </div>-->
                </div>
            </div>
            <div class="rightBox">
                <div class="rightTitle">
                    <h4>[[${modules[5].module.title}]]</h4>
                </div>
                <div class="rightUl">
                    <ul>
                        <li th:each="l:${modules[5].banners}" th:onclick="'detailFun('+${l.id}+')'">[[${l.title}]]</li>
                        <!--<li>> Nullam venenatis lacus a elit fermentum.</li>
                        <li>> Morbi ut sapien nec nisl pulvinar suscipit.</li>
                        <li>> Integer a enim ac ex porta molestie ut at ex.</li>
                        <li>> Sed in nunc non eleifend laoreet eu quis elit.</li>
                        <li>> Nullam venenatis lacus fermentum.</li>
                        <li>> Lorem ipsum dolor sit amet, consectetur elit.</li>-->
                    </ul>
                </div>
            </div>
        </div><!--banner4-->

<!--        脚部-->
        <div th:replace="pub_footer"></div>
    </div><!--bigBox-->
    <script src="assets/js/js/jquery-1.8.2.min.js"></script>
    <script src="assets/js/js/common.js"></script>
    <script src="assets/js/js/html5zoo.js"></script>
    <script src="assets/js/js/jquery.countuo.min.js"></script>
    <script src="assets/js/js/jquery.js"></script>
    <script src="assets/js/js/wow.min.js"></script>
    <script src="assets/js/js/jquery.waypoints.min.js"></script>
    <script src="assets/utils/index.js"></script>
    <script type="text/javascript">
    // var one=new Vue({
    //     el:'#bigBox',
    //     data:{
    //         name:'',
    //         email:''
    //     }
    // })

        function detailFun(id){
            window.location.href = `cms_detail?id=${id}`;
        }


    </script>
</body>
</html>
